<template>
  <div id="app">
    <el-container>
      <el-header>
        <uheader></uheader>
      </el-header>
      <el-container>
        <el-aside width="200px"><uaside></uaside></el-aside>
        <el-main ref="main">
          <breadcrumb></breadcrumb>
          <div class="ins-content"><router-view></router-view></div>
          <!-- <el-menu :default-active="activeMenu" class="g-side" router>
            <template v-for="(route, index) in menus">
              <template>
                <el-menu-item :route="route" :index="route.name" :key="index">{{route.meta.name || route.name}}</el-menu-item>
              </template>
            </template>
          </el-menu> -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import routes from '@/router/index'
import uaside from '@/components/asideNav'
import uheader from '@/components/header'
import breadcrumb from '@/components/breadcrumb'

export default {
  name: 'App',
  components: {
    uaside,
    uheader,
    breadcrumb
  },
  data () {
    return {
      menus: []
    }
  },
  created () {
    this.menus = routes.options.routes
    // console.log(routes.options.routes)
  },
  watch: {
    $route (to) {
      let main = this.$refs.main
      main.$el.scrollTop = 0
    }
  },
  computed: {
    activeMenu: function () {
      return this.$route.name
    }
  }
}
</script>
<style lang="less">
@import './common/common.less';
// base
@maxPercent: 100%;
#app{
  width: @maxPercent;
  height: @maxPercent;
  .el-container{
    width: @maxPercent;
    height: @maxPercent;
    .el-header{
      padding: 0px
    }
  }
}
.ins-content{
  min-height: 98%
}
</style>
